<style lang="less" rel="stylesheet/less" type="text/less">
.real_created {
  padding-bottom: 20px;
}
.edit-tips {
  color: red;
  font-size: 12px;
  padding-bottom: 16px;
}
.detail_key {
  padding-bottom: 12px;
}
</style>
<template>
  <div>
    <div class="real_created">创建时间：{{ real_created }}</div>

    <Form ref="formInline" :model="formInline">
      <Form-item label="名称:" prop="name">
        <Input v-model="formInline.name" name="app-name" type="text" style="width:400px;"></Input>
      </Form-item>
      <Form-item label="说明:" prop="description">
        <Input
          v-model="formInline.description"
          :autosize="{minRows: 3,maxRows: 5}"
          type="textarea"
          style="width:400px;"
        ></Input>
      </Form-item>
      <div class="detail_key">API_KEY：{{ apikeys_detail.key }}</div>
      <div>API_SECRET：{{ apikeys_detail.secret }}</div>
      <div class="edit-tips">*请妥善保管API_KEY和API_SECRET,请勿泄露</div>
      <Form-item label="状态">
        <Select v-model="formInline.status" style="width:200px;">
          <Option
            v-for="item in status_select"
            :value="item.value"
            :key="item.label"
          >{{ item.label }}</Option>
        </Select>
      </Form-item>

      <Form-item>
        <Button type="primary" name="create__submit" @click="handleSubmit()">更新</Button>
      </Form-item>
    </Form>
  </div>
</template>
<script>
export default {
  props: {
    apikeys_detail: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      real_created: null,
      formInline: {
        apikey_id: null,
        name: "",
        status: "", // 状态
        description: ""
      },
      status_select: [
        {
          label: "normal",
          value: "normal"
        },
        {
          label: "user-locked",
          value: "user-locked"
        }
      ]
    };
  },
  created() {
    this.initForm();
  },
  methods: {
    // 初始化获取status的值
    initForm() {
      this.$moment.locale(navigator.language);
      this.formInline.apikey_id = this.apikeys_detail.id;
      this.formInline.status = this.apikeys_detail.status;
      this.formInline.name = this.apikeys_detail.name;
      this.formInline.description = this.apikeys_detail.description;
      this.real_created = this.$moment
        .utc(`${this.apikeys_detail.created_at}`)
        .local()
        .format("lll");
    },
    /*
           提交更新
        */

    handleSubmit() {
      this.$emit("update", this.formInline);
    }

    /*
        转换提交的状态值
        */
    // changeValue() {
    //   if (this.formInline.status === "normal") {
    //     return 0;
    //   }
    //   return 1;
    // }
  }
};
</script>
